<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://static.jiaju.com/jiaju/com/js/dojquery-s-min.js" charset="UTF-8"></script>
    <style>
    #sample{color: transparent;
    text-shadow: #111 0 0 5px;}

    .box{ margin:0 auto; border:1px solid #ccc; }
    .center-vertical {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            height:20px;
            width:20px; 
            background:#ccc;
            left: 50%;
            transform: translateX(-50%); 
        }
        div.box {
        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
        height: 200px;
        margin: 50px auto;
        width: 400px
    }
    *{ margin:0; padding:0;}
    .hehe{ position: relative; height:200px; overflow: hidden;}
    .hehe ul{ position: absolute;left:0; top:0; width:100%;}
    .hehe li{ height:98px; border:1px solid #ccc; font-size: 50px; text-align: center; line-height: 98px;}
    </style>
</head>
<body>
    <a href="http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html">好玩的东东</a>
    <pre>

        在浏览器地址栏直接执行
        javascript:alert('hello from address bar ');
        data:text/html,<h1>Hello, world!</h1>

        data:text/html, <html contenteditable>
        归根结底多亏了HTML5中新加的contenteditable属性，当元素指定了该属性后，元素的内容成为可编辑状态。

        document.body.contentEditable='true';

        利用a标签自动解析URL

        垂直居中
        .center-vertical {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }

       
    </pre>
    <div class="box">
         <div class="center-vertical"></div>

    </div>
  
    

     <div id="sample"> 大家好我是模糊格式</div>
    <div class="hehe" id="hehe">
        <ul id="ul">
            <li>1</li>
        </ul>
       
   </div>
   <input type="button" value="+" id="btn"/>
    <script type="text/javascript">
            var topnum=0;
            var num=1;
           $('#btn').click(function(){
                num++
                var oLi=document.createElement('li');
                oLi.innerHTML=num;

                ul.appendChild(oLi);
                
                if($('#ul').height()>$('#hehe').height()){
                    topnum=$('#ul').height()-$('#hehe').height()
                    $('#ul').stop().animate({top:-topnum})
                }
           })
           // alert(sample.id)
    </script>


</body>
</html>